<!-- 设备在线统计图  -->
<template>
  <div id="device-online-chart-main" >
    <div ref="onlineChartContainer" class="online-chart-container"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import FullScreenMonitor from "@/api/FullScreenMonitor";
import {apiResult} from "@/libs/util";
// 按需引入
export default {
  name:"DeviceOnlineChart",
  data(){
    return{
      api: new FullScreenMonitor(),
      chartOption:{
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c}",
        },
        title: {
          text: this.$t('statistics_online'),//'在线统计',
          left: 'center',
          top: 'top',
          textStyle:{
            color: '#FFFFFF',
            fontSize: 18
          },
          padding: [
            0,  // 上
            10, // 右
            5,  // 下
            0, // 左
          ]

        },
        /*        tooltip: {
                  trigger: 'item'
                },*/
        legend: { //图例组件
          orient: 'vertical',
          left: 140,
          top: 30,
          align: 'left',
          itemGap: 5,
          itemWidth: 25,
          textStyle:{
            color: '#FFFFFF',
            fontSize: 10
          },
          tooltip: {
            show: true
          }
        },
        series: [
          {
            name: this.$t('statistics_online'),//'在线统计',
            type: 'pie',
            left: 'left',
            radius: '50%',
            center: [80, 70],
            /*            itemStyle:{
                          color:['#5470c6',
                            '#91cc75',
                            '#fac858',
                            '#ee6666',
                            '#73c0de',
                            '#3ba272',
                            '#fc8452',
                            '#9a60b4',
                            '#ea7ccc'],
                        },*/
            data: [
              { value: 96, name: '4G执法仪在线',
                itemStyle:{
                  color: '#118c11',
                }
              },
              { value: 163, name: '5G执法仪在线',
                itemStyle:{
                  color: '#4c24eb',
                }
              },
              { value: 12, name: '离线设备',
                itemStyle:{
                  color: '#e30c0c',
                }
              },
              { value: 48, name: '国标设备在线',
                itemStyle:{
                  color: '#8845f8',
                }
              }
            ],
            /*            emphasis: {
                          itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                          }
                        },*/
            label: {
              show: false,
              position: 'right'
            },
          }
        ]
      }
    }

  },
  methods:{
    start(){
      //console.log(">>>>>> DeviceOnlineChart.echarts=%o;chartCateContainer=%o",this.$refs.chartCateContainer)
      let mychart = echarts.init(this.$refs.onlineChartContainer);
      //let mychart = this.$echarts.init(this.$refs.chartContainer);// document.getElementById('chart-container'));
      mychart.setOption(this.chartOption);
    },
    getData(){
      const that=this;
      this.api.getDeviceCountOnlineByType().then(res=>{
        apiResult(res.data,false,result=>{
          let chartData = [];
          let style=[];
          style.push({color: '#118c11'})
          style.push({color: '#4c24eb'})
          style.push({color: '#e30c0c'})
          style.push({color: '#8845f8'})
          //console.log(">>>>>>DeviceOnlineChart.getData: data=%o",res.data.data);
          if (!!result.data && result.data.length > 0){
            for(let i in result.data){
              chartData.push({
                value: result.data[i].value,
                name: this.$t('device_type_'+result.data[i].intId) ,//res.data.data[i].name,
                itemStyle:style[i]})
            }
            that.chartOption.series[0].data=chartData;
          }
          that.chartOption.title.text=this.$t('statistics_online') + "(" +  res.data.msg+ ")";//"在线统计(" + res.data.msg+ ")";
          //console.log(">>>>>>DeviceOnlineChart.getData: chartData=%o",chartData);
          //console.log(">>>>>>DeviceOnlineChart.getData: chartOption=%o",that.chartOption);
          that.start();
        })
      })
    }
  },
  mounted() {
    this.getData();
  }
}

</script>
<style lang="less">
#device-online-chart-main{
  width: 100%;
  height: 100%;
}

.online-chart-container{
  margin-top: 20px;
  width: 100%;
  height: 100%;
}
</style>
